<template>
  <view>
    <view style="height: 10px"></view>
    <view class="login-input-box">
      <view class="icon-box">
        <view v-if="param.typeCode === 'phone'" class="icon">
          +{{param.phoneAreaCode}}
        </view>
        <view v-if="param.typeCode === 'email'" class="icon">
          <view style="font-size: 14rpx">{{"Email"}}</view>
        </view>

      </view>

      <view class="input-box">
        <input
            autofocus
            v-model.trim="param.to"
            ref="input"
            class="input"
            :adjust-position="false"
            id="input"
            :placeholder="$i18n.zhToGlobal('邮箱')"
            type="text"
            @input="input"></input>
      </view>
      <view class="tips">{{$i18n.zhToGlobal('未注册的用户自动注册')}}</view>
    </view>

    <view
    v-if="$i18n.getLanguageCode()==='fi_FI'
    ||$i18n.getLanguageCode()==='bg_BG'
    ||$i18n.getLanguageCode()==='fr_BE'
"
    style="height: 30rpx"
    ></view>

    <view style="height: 50rpx"></view>
    <kt-button
        @click="toNext()"
        ref="nextButton"
        :is-open-box-shadow="false">{{$i18n.zhToGlobal('下一步')}}{{" "}}➠</kt-button>

    <view
        class="agreement-box">
      <view
          @click="isAgree = !isAgree"
          class="agreement-text"
          :style="isNotAgree ? 'color: red' : ''"
      >

        <view class="dot-box">
          <view
              v-if="isAgree"
              class="dot"></view>
        </view>
        {{$i18n.zhToGlobal('我已同意')}}《{{$i18n.zhToGlobal('用户协议')}}》《{{$i18n.zhToGlobal('隐私协议')}}》</view>
    </view>

  </view>
</template>

<script>
import phoneJs from "@/pages/login/phone/phone";

export default {
  data() {
    return {
      param:{
        phoneAreaCode: "86",
        typeCode: "email",
        to: "",
      },
      uuid: "",
      // 是否同意协议
      isAgree: false,
      // 是否没有同意协议，用于判断是否可以点击下一步
      isNotAgree: false,
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    toNext() {
      if (this.param.to.trim() === "") {
        this.$refs.nextButton.error(this.$i18n.zhToGlobal("请输入邮箱"));
        return;
      }
      // 取消所有空格
      this.param.to = this.param.to.replace(/\s*/g, "");
      // 如果是手机号
      if (this.param.typeCode === "phone") {
        if(!phoneJs.check(this.param.phoneAreaCode, this.param.to)){
          this.$refs.nextButton.error(this.$i18n.zhToGlobal("手机号格式错误"));
          return;
        }
      }
      // 如果是邮箱
      if (this.param.typeCode === "email") {
        // 邮箱正则
        let emailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (!emailReg.test(this.param.to)) {
          // this.$refs.nextButton.error("邮箱格式错误");
          this.$refs.nextButton.error(this.$i18n.zhToGlobal("邮箱格式错误"));
          return;
        }
      }

      if (!this.isAgree) {
        // this.$refs.nextButton.error("请同意用户协议");
        this.$refs.nextButton.error(this.$i18n.zhToGlobal("请同意用户协议"));
        this.isNotAgree = true;
        setTimeout(() => {
          this.isNotAgree = false;
        }, 2000);
        return;
      }

      this.$kt.storage.set("loginParam", this.param);
      this.$emit("next");
    },
    input(e) {
      // this.changeType(this.param.to);
    },

    /**
     * 验证是否满足是否有@
     * @param e
     */
    getIsEmail(e) {
      return e.indexOf('@') !== -1;
    },
    /**
     * 切换状态
     */
    changeType(e) {
      if (this.getIsEmail(e)) {
        this.param.typeCode = "email"
      } else {
        this.param.typeCode = "phone"
      }
    },


  }
}
</script>

<style lang="scss" scoped>
.login-input-box {
  position: relative;
  height: 55px;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  font-size: 32rpx;
  padding: 10rpx;
  box-sizing: border-box;

  .icon-box {
    display: inline-block;
    width: 120rpx;
    height: 100%;
    vertical-align: top;
    text-align: center;
    color: #000000;
    font-weight: bold;
    letter-spacing: 1px;

    .icon {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .input-box {
    position: relative;
    display: inline-block;
    width: calc(100% - 120rpx);
    height: 100%;

    .input {
      position: relative;
      width: 100%;
      font-size: 35rpx;
      top: 50%;
      transform: translateY(-50%);
    }

  }

}

.agreement-box{
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
  .agreement-text{
    display: inline-block;
    font-size: 24rpx;
    vertical-align: top;
    color: #666666;
  }
}

.agreement-box:active{
  opacity: .8;
}


.dot-box{
  display: inline-block;
  vertical-align: top;
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
  border-radius: 50%;
  border: 1px solid #000000;
  margin-top: 8rpx;
  position: relative;
  .dot{
    position: absolute;
    width: 15rpx;
    height: 15rpx;
    border-radius: 50%;
    background-color: #666666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.tips{
  font-size: 24rpx;
  color: #666666;
  margin-top: 10rpx;
  text-align: left;
}


</style>
